<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView Basic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">

    <h3>Supplier Information</h3>
    <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" 
    CellPadding="3" DataKeyName="ID"
    SortColumn="CategoryName" SortOrderAscendingImageUrl="~/Images/up.gif" 
    SortOrderDescendingImageUrl="~/Images/dn.gif" SortCommandEvent="onSortCommand">
       <AlternatingRowStyle CssClass="AlternatingRowStyle" />
       <RowStyle CssClass="RowStyle"/>
       <HeaderStyle CssClass="HeaderStyle"/>
        <Columns>
            <AjaxData:GridViewBoundColumn AllowDragAndDrop =false HeaderText="Product" DataField="Name" SortField="Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" />
            <AjaxData:GridViewBoundColumn AllowDragAndDrop =false HeaderText="Category" DataField="CategoryName" SortField="CategoryName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"/>
            <AjaxData:GridViewBoundColumn AllowDragAndDrop =false HeaderText="Supplier" DataField="SupplierName" SortField="SupplierName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"/>
            <AjaxData:GridViewBoundColumn HeaderText="Quantity/Unit" DataField="QuantityPerUnit" SortField="QuantityPerUnit" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="left"/>
            <AjaxData:GridViewBoundColumn HeaderText="Unit Price" DataField="UnitPrice" SortField="UnitPrice" DataFormatString="c" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
            <AjaxData:GridViewBoundColumn HeaderText="Units In Stock" DataField="UnitsInStock" SortField="UnitsInStock" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
            <AjaxData:GridViewBoundColumn HeaderText="Units On Order" DataField="UnitsOnOrder" SortField="UnitsOnOrder" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Right" HeaderStyle-Wrap="false"/>
       </Columns>
    </AjaxData:GridView>
    <script type="text/javascript">
         
        function pageLoad(sender, e) {
             loadProducts();
        }
        
        function onLoadSuccess(result) {
            GridView1.set_dataSource(result.Rows);
            GridView1.dataBind();
        }
        
        function loadProducts() {
            //Need to convert the sortoder so our WS understand
            var sortColumn = GridView1.get_sortColumn();
            var sortOrder = (GridView1.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';

            DataService.GetTop100Products(sortColumn,sortOrder,onLoadSuccess);
        }

        function onSortCommand(sender, e) {
            GridView1.set_sortColumn(e.get_sortColumn())
            GridView1.set_sortOrder(e.get_sortOrder());
            loadProducts();
        }
    </script>
</asp:Content>